<template>
	<view>
		<view class="d-flex flex-column a-center pt-3">
			<!-- <navigator url="staff_joinactivitylist" class="head-jxs">我报名的活动</navigator> -->
			<view class="head-text" @tap="openmodify(0, 'center')">修改个人信息</view>
		</view>
		
		<view  class="pl-5 pr-5 line-h-lg" >
			<view class="invitetitle">
				<view class="invitetitle-em"></view>
				<view class="invitetitle-text">我的个人信息</view>
			</view>
			<view>
				<view><span style="color: #777;">姓名：</span>{{staff_info_data.name}}</view>
				<view><span style="color: #777;">电话：</span>{{staff_info_data.tel}}</view>
			</view>
		</view>
		
		<divider />
		
		<view>
			<facInfo :factory_info_data="factory_info_data" class="pl-5 pr-5 line-h-md" />
		</view>
		
		
		
	
		<staff-tab-bar :pagePath="'/pages/staff/staff_my'" :activity_id="activity_id" :factory_id="factory_id" :staff_id="staff_id" />
	
		<openAlert BgColor="rgba(0,0,0,0.7)" ref="openAlertmodify" :AlertClass="AlertClass" :AlertPosition="AlertPosition" closeBtn>
			<view class="modify">
				<view class="modify-title">修改信息</view>
				<view class="modify-info">
					<view>姓名：
						<input :placeholder="staff_info_data.name" type="text" class="modify-input" v-model="staff.username" />
					</view>
					<view>电话：
						<input :placeholder="staff_info_data.tel" type="number" maxlength="11" class="modify-input" v-model="staff.userphone" />
					</view>
					<view><button @click="queren()" class="modify-but">确&nbsp;&nbsp;&nbsp;&nbsp;认</button></view>
					<view><button @click="quxiao()">取&nbsp;&nbsp;&nbsp;&nbsp;消</button></view>
				</view>
			</view>
		</openAlert>
		
	</view>
</template>

<script>
	import staffTabBar from '@/components/staff/staff_tabbar.vue'
	export default {
		components: {
			staffTabBar
		},
		data () {
			return {
				AlertClass: 0,
				AlertPosition: '',
				activity_id:0,
				factory_id:0,
				staff_id:0,
				staff: {
					username: '',
					userphone: '',
				},
				staff_info_data:{},
				factory_info_data: {},
			}
		},
		onLoad(e) {
			this.activity_id = e.activity_id
			this.factory_id = e.factory_id
			this.staff_id = e.staff_id
			
			this.$comm.appLogin(user_info=>{
				this.my_staff_info()
			})
			
		},
		methods: {
			//修改信息
			queren(id) {
				var id = this.staff_id
				let data = this.staff;
				if (data.username == '') {
					uni.showToast({
						title: '员工姓名不能为空',
						icon: 'none'
					})
					return false
				}
				if (data.userphone == '') {
					uni.showToast({
						title: '员工号码不能为空',
						icon: 'none'
					})
					return
				} else {
					let myreg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
					if (!myreg.test(data.userphone)) {
						uni.showToast({
							title: '手机号码不合法',
							icon: 'none'
						});
						return false;
					}
				}
				this.$comm.request({
					url: 'api/my_staff_update',
					method: 'POST',
					data: {
						activity_id: this.activity_id,
						fac_id: this.factory_id,
						staff_id: id,
						name: data.username,
						tel: data.userphone,
					},
					success: res => {
						var res = res.data
						console.log(res, id)
						// console.log(id)
						if (res.code == 200) {
							uni.showToast({
								title: res.msg
							})
							this.$refs.openAlertmodify.Close();
							this.my_staff_info();
							return
						} else {
							uni.showToast({
								title: res.msg
							})
						}
					}
				})
			},
			
			//打开修改信息
			openmodify(Class, Position) {
				this.$nextTick(function() {
					this.AlertClass = Class;
					this.AlertPosition = Position;
					this.$nextTick(function() {
						this.$refs.openAlertmodify.Show();
					});
				});
			},
			
			//修改信息页面取消按钮
			quxiao() {
				this.$refs.openAlertmodify.Close();
			},
			
			//获取员工自己的信息
			my_staff_info() {
				this.$comm.request({
					url: 'api/my_staff_info',
					method: 'GET',
					data: {
						fac_id: this.factory_id
					},
					success: res => {
						var res = res.data
						console.log(res)
						this.staff_info_data = res.result;
						this.factory_info_data = res.result.fac_info;
						// console.log(this.staff_info_data)
						this.staff.username = res.result.name;
						this.staff.userphone = res.result.tel;
						this.staff_id = res.result.id
						// console.log(this.staff_id)
						if (res.code == 200) {
							this.msg = res.msg
							this.info = true
							// console.log(res.code)
						} else {
							this.msg = res.msg
							this.info = false
							// console.log(res.code)
						}
					}
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	@import '@/common/main.css';
	@import  '@/common/zcm-main.css';
	
	page{
		font-size: 30rpx;
	}
	
	@mixin head-text {
		color: #ffffff;
		line-height: 2.5;
		background-color: #475dfc;
		width: 300rpx;
		text-align: center;
		border-radius: 50rpx;
		// margin: 15rpx;
	}
	
	.head-text {
		@include head-text;
		// margin-top: 20rpx;
	}
	
	.head-jxs {
		@include head-text;
		width: 400rpx;
	}
	
	.invitetitle {
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 20rpx 0 10rpx 0;
		
		.invitetitle-em {
			height: 35rpx;
			width: 10rpx;
			background-color: #475dfc;
			border-radius: 50rpx;
		}
	
		.invitetitle-text {
			font-weight: bold;
			margin-left: 10rpx;
		}
	}
	
	.modify {
		width: 550rpx;
		background-color: none;
		background: #fff;
		padding: 50rpx;
		border-radius: 12rpx;
		
		.modify-title {
			text-align: center;
			font-size: 45rpx;
			margin-bottom: 40rpx;
		}
		
		.modify-info {
			display: flex;
			flex-direction: column;
			color: #000000;
			font-size: 30rpx;
		}
		
		.modify-input {
			background-color: rgba(0, 0, 0, 0.2);
			color: #000000;
			height: 70rpx;
			margin-top: 5rpx;
			padding-left: 20rpx;
			margin-bottom: 20rpx;
			border-radius: 12rpx;
		}
		
		.modify-but {
			margin-top: 20rpx;
			margin-bottom: 20rpx;
			background-color: #475dfc;
			color: #ffffff;
		}
	}
	
</style>
